import Guide from '@/components/Guide';
import { trim } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { MultiMarker, TMap } from 'tlbs-map-react';
import { useRef, useCallback } from 'react';
const styles = {
  multiMarkerStyle: {
    width: 20,
    height: 30,
    anchor: { x: 10, y: 30 },
  },
};

// 数据
const geometries = [
  {
    styleId: 'multiMarkerStyle',
    position: { lat: 40.0404, lng: 116.2735 },
  },
];

const HomePage: React.FC = () => {
  const { name } = useModel('global');
   // 获取地图实例 mapRef.current
   const mapRef = useRef(null);
   // 获取点标记图层实例 markerRef.current
   const markerRef = useRef(null);
 
   const clickHandler = useCallback((event: any) => {
     console.log('🚀🚀🚀 点标记图层点击事件', event);
   }, []);
  return (
    <PageContainer ghost>
      <div >
      <TMap ref={mapRef} apiKey="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77">
        <MultiMarker
          ref={markerRef}
          styles={styles}
          geometries={geometries}
          onClick={clickHandler}
        />
      </TMap>
      </div>
    </PageContainer>
  );
};

export default HomePage;
// Removed conflicting local declarations of useCallback and useRef

